<template>
	<transition name="move">
	<div class="foodWrapper" v-show="showFlag" ref="foodwrapper">
		<div class="food-content">
			<div class="image-header">
				<img :src="food.image">
				<div class="back" @click="hide">
					<i class="icon-arrow_lift"></i>
				</div>
			</div>
			<div class="content">
				<h1 class="title">{{food.name}}</h1>
				<div class="detail">
					<span class="sell-count">月售{{food.sellCount}}份</span>
					<span class="rating">好评率{{food.rating}}</span>
				</div>
				<div class="price">
					<span class="now">￥<em class="num">{{food.price}}</em></span>
					<span class="old" v-show="food.oldPrice">￥<em>{{food.oldPrice}}</em></span>
				</div>
				<div class="cartcontrol-wrapper">
					<cartcontrol :food="food" @addCart="cartadd"></cartcontrol>
				</div>
				<div class="buy" v-show="!food.count || food.count === 0" @click="addFirst">加入购物车</div>
			</div>
			<split v-if="food.info"></split>
			<div class="info" v-if="food.info">
				<h3 class="title">商品信息</h3>
				<p class="text">{{food.info}}</p>
			</div>
			<split></split>
			<div class="rating">
				<h1 class="title">商品评价</h1>
				<ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings" @typeselect="_typeselect" @togglecontent="_togglecontent"></ratingselect>
				<div class="rating-wrapper">
					<ul v-if="food.ratings && food.ratings.length">
						<li class="rating-item" v-for="rating in food.ratings" v-show="needShow(rating.rateType, rating.text)">
							<div class="user">
								<span class="name">{{rating.username}}</span>
								<img :src="rating.avatar" class="avatar" width="12" height="12">
							</div>
							<div class="time">{{rating.rateTime | formatDate}}</div>
							<p class="text">
								<i :class="{'icon-thumb_up':rating.rateType === 0, 'icon-thumb_down':rating.rateType === 1}"></i>{{rating.text}}
							</p>
						</li>
					</ul>
					<div class="no-rating" v-else>
						暂无评价
					</div>
				</div>
			</div>
		</div>
	</div>
	</transition>
</template>

<script type="text/ecmascript-6">
	import Vue from 'vue';
	import BScroll from 'better-scroll';
	import cartcontrol from 'components/cartcontrol/cartcontrol.vue';
	import split from 'components/split/split.vue';
	import ratingselect from 'components/ratingselect/ratingselect.vue';
	import {formatDate} from '../../common/js/date.js';

	const ALL = 2;

	export default{
		props: {
			food: {
				type: Object
			}
		},
		data() {
			return {
				showFlag: false,
				selectType: ALL,
				onlyContent: false,
				desc: {
					all: '全部',
					positive: '推荐',
					negative: '吐槽'
				}
			};
		},
		methods: {
			show() {
				this.showFlag = true;
				this.selectType = ALL;
				this.onlyContent = false;
				this.$nextTick(() => {
					if (!this.scroll) {
						this.scroll = new BScroll(this.$refs.foodwrapper, {
							click: true
						});
					} else {
						this.scroll.refresh();
					}
				});
			},
			hide() {
				this.showFlag = false;
			},
			addFirst(event) {
				if (!event._constructed) {
					return;
				}
				Vue.set(this.food, 'count', 1);
				this.$emit('addCart', event.target);
			},
			cartadd(target) {
				this.$emit('addCart', target);
			},
			needShow(type, text) {
				if (this.onlyContent && !text) {
					return false;
				}
				if (this.selectType === ALL) {
					return true;
				} else {
					return type === this.selectType;
				}
			},
			_typeselect(type) {
				this.selectType = type;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			},
			_togglecontent(onlyContent) {
				this.onlyContent = onlyContent;
				this.$nextTick(() => {
					this.scroll.refresh();
				});
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		components: {
			cartcontrol,
			split,
			ratingselect
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin.styl"
	.foodWrapper
		position fixed
		left 0px
		top 0px
		bottom 48px
		z-index 8
		width 100%
		background-color #FFF
		transition all .3s
		transform translate3d(0, 0, 0)
		&.move-enter, &.move-leave-active
			transform translate3d(100%, 0, 0)
		.image-header
			position relative
			width 100%
			height 0px
			padding-top 100%
			img
				position absolute
				top 0px
				left 0px
				width 100%
				height 100%
			.back
				position absolute
				top 10px
				left 0px
				.icon-arrow_lift
					display block
					padding 10px
					font-size 18px
					color #FFF
		.content
			position relative
			padding 18px
			.title
				line-height 14px
				margin-bottom 8px
				font-size 14px
				font-weight 700
				color rgb(7, 17, 27)
			.detail
				margin-bottom 18px
				line-height 10px
				height 10px
				font-size 0px
				.sell-count, .rating
					font-size 10px
					color rgb(147, 153, 159)
				.sell-count
					margin-right 12px
			.price
				line-height 24px
				font-size 0
				.num
					font-size 14px
					font-weight 700
				.now
					margin-right 8px
					font-size 10px
					color rgb(240, 20, 20)
				.old
					text-decoration line-through
					font-size 10px
					color rgb(147, 153, 159)
			.cartcontrol-wrapper
				position absolute
				right 12px
				bottom 12px
			.buy
				position absolute
				right 18px
				bottom 18px
				z-index 10
				height 24px
				line-height 24px
				padding 0 12px
				box-sizing border-box
				font-size 10px
				border-radius 12px
				color #FFF
				background-color rgb(0, 160, 220)
		.info
			padding 18px
			.title
				line-height 14px
				margin 0 0 6px
				font-size 14px
				color rgb(7, 17, 27)
			.text
				line-height 24px
				padding 0 8px
				margin 0
				font-size 12px
				color rgb(77, 85, 93)
		.rating
			padding 18px 0
			.title
				line-height 14px
				margin 0 0 6px 18px
				font-size 14px
				color rgb(7, 17, 27)
			.rating-wrapper
				padding 0 18px
				.rating-item
					position relative
					padding 16px 0
					border-1px(rgba(7, 17, 27, .1))
					.user
						position absolute
						right 0px
						top 16px
						font-size 0px
						line-height 12px
						.name
							display inlie-block
							margin-right 6px
							vertical-align top
							font-size 10px
							color rgb(147, 153, 159)
						.avatar
							border-radius 50%
					.time
						margin-bottom 6px
						line-height 12px
						font-size 10px
					.text
						margin 0px
						line-height 16px
						font-size 12px
						color rgb(7, 17, 27)
						.icon-thumb_up, .icon-thumb_down
							margin-right 4px
							line-height 16px
							font-size 12px
						.icon-thumb_up
							color rgb(0, 160, 220)
						.icon-thumb_down
							color rgb(147, 153, 159)
				.no-rating
					padding 10px 0
					font-size 12px
					color rgb(147, 153, 159)
					text-align center
</style>